<template>
	<page-meta :page-style="'overflow:'+(pageMetaShow?'hidden':'visible')"></page-meta>
	<view class="content">
		<!-- /static/my/indexBg.png -->
		<image class="indexBg" src="https://static20250730.oss-cn-hangzhou.aliyuncs.com/wechatminiv2/indexBg.png"
			mode=""></image>
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight">
			</headNav>
			<view class="xfWrap">
				<image class="xfBg" src="https://static20250730.oss-cn-hangzhou.aliyuncs.com/wechatminiv2/xfBg.png"
					mode="widthFix"></image>
				<!-- <image class="xfBg" src="/static/my/xfBg.png" mode="widthFix"></image> -->
				<image class="cjTitle" src="/static/my/cjTitle.png" mode="widthFix"></image>
				<view class="title">
					揭晓
				</view>
			</view>
		</view>
		<view class="contentWrap">
			<scroll-view style="height:calc(100vh - 520rpx); " :scroll-top="scrollTop" scroll-y="true"
				refresher-enabled="true" @scroll="scroll" :refresher-triggered="triggered" :refresher-threshold="100"
				refresher-background="transparent" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrolltolower">
				<noData v-if="activitiesList.length === 0 && !loading"></noData>
				<template v-else>
					<view class="scroll-view-item" v-for="(item,index) in activitiesList" :key="index">
						<image class="xfbg2" src="/static/my/xfbg2.png" mode="widthFix"></image>
						<view class="dateBox">
							<view class="txt">
								{{item.start_time.substring(0, 10)}}
							</view>
							<view class="txt">
								—{{item.end_time.substring(0, 10)}}
							</view>
						</view>
						<!-- 奖品 -->
						<!-- <image class="prize" src="" mode="aspectFill"></image> -->
						<view class="prize">
							{{item.prize_remark}}
						</view>
						<view class="statusBox">
							<image v-if="item.status==1" src="/static/my/prizeIcon1.png" mode="widthFix"></image>
							<image v-if="item.status==0" src="/static/my/prizeIcon2.png" mode="widthFix"></image>
							<image v-if="item.status==2" src="/static/my/prizeIcon3.png" mode="widthFix"></image>
						</view>
						<!--  -->
						<!-- <centerZoomSwiper :bannerList="" :autoplay="true" :interval="3000" url-key="user_avatar" ></centerZoomSwiper> -->
						<!-- @change="onSwiperChange1"@click="onSwiprtItemClick" -->
						<swiper :current="item.switchCurrent" class="swiper" autoplay>
							<swiper-item v-for="(item2, index2) in item.user_list" :key="index2" class="swiper-item">
								<view class="userimgBG">

									<image class="userImg" :src="item2.user_avatar|completeUrl" mode="aspectFill"></image>
								</view>
								<view class="txtLay">

									<view class="title">{{item2.nickname}}</view>
									<view class="qq">{{item2.qq}}</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- 使用uni-load-more组件显示加载状态 -->
					<uni-load-more :status="loading ? 'loading' : noMoreData ? 'noMore' : 'more'"
						iconType="auto"></uni-load-more>

				</template>
			</scroll-view>
		</view>
		<uni-popup ref="popup" safe-area @change="change" background-color="#fff" borderRadius="40px 40px 0 0">
			<view class="popup-content">

				<!-- <image class="xfbg3" src="/static/my/xfbg3.png" mode="aspectFit"></image> -->
				<image class="xfbg3" src="https://static20250730.oss-cn-hangzhou.aliyuncs.com/wechatminiv2/xfbg3.png"
					mode="aspectFit"></image>
				<view class="xfText">
					<view class="title">
						恭喜您
					</view>
					<view class="text">
						被500元红包砸中！！！
					</view>
					<view class="bnt">
						<image src="/static/bntBg.png" class="bntBg" mode="aspectFit"></image>
						联系喵喵HF领取
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageMetaShow: false,
				triggered: false,
				checked: true,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				triggered: false,
				_freshing: false,
				activitiesList: [],
				page: 1, // 当前页码
				page_size: 10, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据

				userList: [],
			};
		},
		onLoad() {
			/* this._freshing = false;
			 setTimeout(() => {
			     this.triggered = true;
			 }, 1000) */
			// this.toggle();
			this.resetList()
		},
		methods: {

			change(e) {
				this.pageMetaShow = e.show
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('center')
			},
			shareToggle() {
				this.$refs.share.open()
			},
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				this.checked = e.detail.value;
			},
			//自定义下拉刷新控件被下拉
			onPulling(e) {
				// console.log("onpulling", e);
				// this.page = 1;
				// this.noMoreData = false;
				// this.getActivitiesListFn();
			},
			// 自定义下拉刷新被触发	
			onRefresh() {
				console.log("onRefresh");
				let that = this;
				if (this._freshing) return;
				// 1. 设置刷新状态
				this._freshing = true;
				this.triggered = true;
				// 2. 重置分页参数
				// 3. 重新加载数据
				this.resetList();
				// 4. 无论成功失败，2秒后复位刷新状态
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000);
			},
			// 自定义下拉刷新被复位	
			onRestore() {
				this.triggered = false;
				this._freshing = false;
				// this.triggered = false // 'restore'; // 需要重置
				console.log("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.log("onAbort");
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件	
			scrolltolower: function(e) {
				console.log(e);
				// 如果没有更多数据或正在加载，则返回
				if (this.noMoreData || this.loading) return

				// 页码增加并获取下一页数据
				this.page++
				this.getActivitiesListFn()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回到顶部，目前没用，感觉可以优化流程
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1
				this.noMoreData = false
				this.getActivitiesListFn()
			},
			getActivitiesListFn() {
				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.$http('/v1/activities/list', {
						page: this.page,
						page_size: this.page_size,
					}).then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							/* 	data.list.forEarch(item => {
								item.switchCurrent=0
							}) */
							// console.log(user_list, "user_list");
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.activitiesList = data.list || []
								// this.userList = user_list || []
							} else {
								// 后续页，合并数据
								this.activitiesList = [...this.activitiesList, ...(data.list || [])]
								// this.userList = [...this.userList, ...(user_list || [])]
							}

							// 更新总数据量
							this.total = data.total || 0;
							// 判断是否还有更多数据
							this.noMoreData = this.activitiesList.length >= this.total
							// this.activitiesList = res.data.list;

							// 把下拉状态复位
							this.triggered = false;
							this._freshing = false;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.indexBg {
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: -2;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.mainHeader {
			position: relative;
		}

		.xfWrap {
			position: absolute;
			top: 0;

			.xfBg {
				width: 100vw;
				height: 0;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.cjTitle {
				@include setwh(440upx, 0);
				position: absolute;
				top: 208upx;
				left: 182upx;
				z-index: 1;
			}

			.title {
				position: absolute;
				font-family: HYXinRenWenSong, HYXinRenWenSong;
				font-weight: normal;
				font-size: 44rpx;
				color: #FFFFFF;
				line-height: 58rpx;
				top: 132upx;
				left: 170upx;
				width: 154upx;
				z-index: 1;
			}
		}

		.contentWrap {
			position: relative;
			top: 362upx;

			.scroll-view-item {
				position: relative;
				margin-bottom: 36upx;
				// height: 510upx;
				.xfbg2 {
					position: relative;
					top: 0;
					left: 50%;
					right: 0;
					bottom: 0;
					transform: translateX(-50%);
					@include setwh(678upx, 0);
				}
.dateBox{
	position: absolute;
	right: 100upx;
	top: 96upx;
	.txt{
		font-size: 20rpx;
		color: #C88388;
		line-height: 1.5;
		& + .txt{
			padding-left: 40upx;
		}
	}
}
				.prize {
					position: absolute;
					@include setwh(316rpx, 200rpx);
					// background-color: #FFFFFF;
					// transform: rotate(-5deg);
					    left: 94rpx;
					    top: 200rpx;
						color: #C88388;
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: bold;
						font-size: 22rpx;
						line-height: 1.5;
						text-indent: 2em;
					}
					.statusBox{
						position: absolute;
						top: 44rpx;
						right: 0;
						image{
							@include setwh(102rpx, 0);
						}
					}
				.swiper {
					position: absolute;
					right: 116rpx;
					bottom: -10rpx;
					width: 200upx;
				}

				.userimgBG {
					@include setwh(106upx, 106upx);
					border-radius: 50%;
					border: 2upx solid #fff;
					// position: absolute;
					// right: 144upx;
					// top: 224rpx;
					// 为什么要旋转两次，因为我真不会调整clip-path
					transform: rotate(90deg);
					clip-path: polygon(90% 0%, 0% 0%, 0% 100%, 90% 100%);
					overflow: hidden;
    margin: 0 auto;
					.userImg {
						@include setwh(100%, 100%);
						background-color: #F3F3F3;
						transform: rotate(-90deg);
					}

				}

				.txtLay {
					position: absolute;
					right: -8upx;//32upx; // 68rpx;
					top: 136upx; //366rpx;
					min-width: 112upx;
					// opacity: 0;
					// transform: translateY(20px);
					transition: all 0.5s ease 0.3s;

					&.active {
						opacity: 1;
						transform: translateY(0);
					}

					.title {
						font-size: 16rpx;
						font-weight: bold;
						color: #C88388;

						margin-bottom: 14rpx;
					}

					.qq {
						font-size: 14rpx;
						color: #8A8988;
						padding-left: 10upx;
					}
				}
			}
		}
	}

	@-webkit-keyframes growUp {
		from {
			transform: translateY(100%);
			/* 从底部开始 */
			opacity: 0;
			/* 开始时完全透明 */
		}

		to {
			transform: translateY(0);
			/* 移动到原始位置 */
			opacity: 1;
			/* 结束时完全不透明 */
		}
	}

	.popup-content {
		position: relative;
		overflow: hidden;
		// @include flexLayout(center, center);
		animation: growUp 2s forwards;
		@include setwh(558upx, 636upx);

		// height: 0;
		.xfbg3 {
			@include setwh(100%, 100%, );
			margin: 0 auto;
		}

		.xfText {
			@include setwh(558upx, 300upx);
			@include flexLayout(center);
			flex-direction: column;
			font-family: kkt;
			position: absolute;
			z-index: 9;
			top: 0;

			.title {
				font-weight: normal;
				font-size: 32rpx;
				color: #9E4C4C;
				line-height: 46rpx;
				padding-top: 32upx;
			}

			.text {
				padding-top: 64upx;
				font-weight: normal;
				font-size: 30rpx;
				color: #9E4C4C;
				line-height: 40rpx;
			}

			.bnt {
				margin-top: 64upx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 24rpx;
				color: #9E4C4C;
				@include setwh(370upx, 86upx);
				line-height: 86upx;
				text-align: center;
				position: relative;

				.bntBg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					z-index: -1;
					@include setwh(370upx, 86upx);
				}
			}
		}
	}
</style>